import React,{Component} from 'react';

class RadioPicker extends Component {
    constructor(props){
        super(props)
        this.state={
            activeValue:''
        }
    }

    itemClick(value,label,e2){
        e2.stopPropagation();
        this.setState({
            activeValue:value
        });
        this.props.onChange(value,label)
        
    }

    componentDidMount(){
        console.log(this.props.selected)
        this.setState({
            activeValue:(typeof this.props.selected!== 'undefined')?this.props.selected:this.props.groups[0].value
        },()=>{
            this.props.groups.map((item)=>{
                if (item.value==this.state.activeValue){
                    if (this.props.onChange)
                    {
                        this.props.onChange(item.value,item.label)
                    }
                }
            })
        })
       
    }

    render(){
        let items=this.props.groups.map((item)=>{
            return (
                <span style={{marginRight:'20px'}} key={Math.random().toString(16).substring(2)} onClick={this.itemClick.bind(this,item.value,item.label)} >
                    <span className="dot">
                        {(item.value == this.state.activeValue)?<i></i>:null}
                    </span>
                    {item.label}
                </span>
            )
        })

        
        return (
            <div className="com-sel" onClick={(this.props.onClick)?this.props.onClick.bind(this):null}>
                {this.props.title?<span className="title">{this.props.title}</span>:null}
                {items}
            </div>
        )
    }
}

export default RadioPicker